<template>
  <div class="party-building">
    <div class="page-header">
      <h1 class="page-title">党建管理</h1>
      <p class="page-subtitle">统一管理组织生活、理论学习与志愿服务</p>
    </div>

    <el-tabs v-model="active">
      <el-tab-pane name="activities" label="组织生活">
        <el-button type="primary" style="margin-bottom: 12px" @click="openCreateActivity">新增活动</el-button>
        <el-table :data="activities" v-loading="loading.activities">
          <el-table-column prop="activityDate" label="日期" width="120" />
          <el-table-column prop="activityType" label="类型" width="120" />
          <el-table-column prop="activitySubject" label="主题" min-width="240" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="110">
            <template #default="{ row }">
              <el-tag :type="statusTagType(row.status)">{{ statusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="viewActivity(row)">查看</el-button>
              <el-button size="small" type="primary" @click="editActivity(row)">编辑</el-button>
              <el-button size="small" type="success" v-if="row.status==='PENDING'" @click="openReview('activity', row)">通过/驳回</el-button>
              <el-button size="small" type="danger" @click="removeActivity(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane name="theory" label="理论学习">
        <el-button type="primary" style="margin-bottom: 12px" @click="openCreateStudy">新增学习</el-button>
        <el-table :data="studies" v-loading="loading.studies">
          <el-table-column prop="studyDate" label="日期" width="120" />
          <el-table-column prop="studyTopic" label="主题" min-width="240" show-overflow-tooltip />
          <el-table-column prop="studyForm" label="形式" width="120" />
          <el-table-column prop="studyHours" label="学时" width="100" />
          <el-table-column prop="status" label="状态" width="110">
            <template #default="{ row }">
              <el-tag :type="statusTagType(row.status)">{{ statusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="editStudy(row)">编辑</el-button>
              <el-button size="small" type="success" v-if="row.status==='PENDING'" @click="openReview('study', row)">通过/驳回</el-button>
              <el-button size="small" type="danger" @click="removeStudy(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane name="volunteer" label="志愿服务">
        <el-button type="primary" style="margin-bottom: 12px" @click="openCreateVolunteer">新增服务</el-button>
        <el-table :data="volunteers" v-loading="loading.volunteers">
          <el-table-column prop="serviceDate" label="日期" width="120" />
          <el-table-column prop="serviceTitle" label="主题" min-width="240" show-overflow-tooltip />
          <el-table-column prop="serviceType" label="类型" width="140" />
          <el-table-column prop="serviceHours" label="时长(h)" width="110" />
          <el-table-column prop="status" label="状态" width="110">
            <template #default="{ row }">
              <el-tag :type="statusTagType(row.status)">{{ statusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="editVolunteer(row)">编辑</el-button>
              <el-button size="small" type="success" @click="approveVolunteer(row)" v-if="row.status==='PENDING'">通过</el-button>
              <el-button size="small" type="danger" @click="rejectVolunteer(row)" v-if="row.status==='PENDING'">驳回</el-button>
              <el-button size="small" type="danger" @click="removeVolunteer(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 审核对话框 -->
    <el-dialog v-model="showReviewDialog" title="审核" width="520px">
      <el-form :model="reviewForm" label-width="96px">
        <el-form-item label="审核结果" required>
          <el-radio-group v-model="reviewForm.status">
            <el-radio label="APPROVED">通过</el-radio>
            <el-radio label="REJECTED">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="reviewForm.opinion" type="textarea" :rows="4" maxlength="1000" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showReviewDialog=false">取消</el-button>
        <el-button type="primary" :loading="reviewLoading" @click="submitReview">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listActivities, createActivity, updateActivity, deleteActivity, reviewActivity } from '@/api/party'
import { getAllStudies, createStudy, updateStudy, deleteStudy, reviewStudy } from '@/api/theory'
import { getAllVolunteers, createVolunteer, updateVolunteer, deleteVolunteer, reviewVolunteer } from '@/api/volunteer'

const active = ref('activities')
const activities = ref([])
const studies = ref([])
const volunteers = ref([])
const loading = ref({ activities: false, studies: false, volunteers: false })

// 审核
const showReviewDialog = ref(false)
const reviewLoading = ref(false)
const reviewTarget = ref({ type: '', id: null })
const reviewForm = ref({ status: '', opinion: '' })

const loadActivities = async () => {
  loading.value.activities = true
  try {
    const res = await listActivities({})
    const arr = (res?.data || res || []).map(i => ({ ...i }))
    activities.value = arr
  } finally { loading.value.activities = false }
}
const loadStudies = async () => {
  loading.value.studies = true
  try {
    const res = await getAllStudies({})
    const arr = (res?.data || res || []).map(i => ({ ...i }))
    studies.value = arr
  } finally { loading.value.studies = false }
}
const loadVolunteers = async () => {
  loading.value.volunteers = true
  try { const res = await getAllVolunteers({}); volunteers.value = res?.data || res || [] } finally { loading.value.volunteers = false }
}

const openCreateActivity = () => ElMessage.info('请在现有“支部活动管理”页面进行创建（或后续在此补充表单）')
const viewActivity = () => {}
const editActivity = () => {}
const removeActivity = async (row) => { await ElMessageBox.confirm('确定删除？','提示',{type:'warning'}); await deleteActivity(row.id); ElMessage.success('已删除'); await loadActivities() }

const openCreateStudy = () => ElMessage.info('请在“理论学习”相关页面创建（或后续在此补充表单）')
const editStudy = async () => {}
const removeStudy = async (row) => { await ElMessageBox.confirm('确定删除？','提示',{type:'warning'}); await deleteStudy(row.id); ElMessage.success('已删除'); await loadStudies() }

const openCreateVolunteer = () => ElMessage.info('请在“志愿服务”相关页面创建（或后续在此补充表单）')
const editVolunteer = async () => {}
const approveVolunteer = async (row) => { await reviewVolunteer(row.id, { status: 'APPROVED' }); ElMessage.success('已通过'); await loadVolunteers() }
const rejectVolunteer = async (row) => { await reviewVolunteer(row.id, { status: 'REJECTED' }); ElMessage.success('已驳回'); await loadVolunteers() }
const removeVolunteer = async (row) => { await ElMessageBox.confirm('确定删除？','提示',{type:'warning'}); await deleteVolunteer(row.id); ElMessage.success('已删除'); await loadVolunteers() }

loadActivities(); loadStudies(); loadVolunteers()

const openReview = (type, row) => {
  reviewTarget.value = { type, id: row.id }
  reviewForm.value = { status: '', opinion: '' }
  showReviewDialog.value = true
}

const submitReview = async () => {
  if (!reviewForm.value.status) { ElMessage.warning('请选择审核结果'); return }
  reviewLoading.value = true
  try {
    if (reviewTarget.value.type === 'activity') {
      await reviewActivity(reviewTarget.value.id, { status: reviewForm.value.status, opinion: reviewForm.value.opinion })
      await loadActivities()
    } else if (reviewTarget.value.type === 'study') {
      await reviewStudy(reviewTarget.value.id, { status: reviewForm.value.status, opinion: reviewForm.value.opinion })
      await loadStudies()
    }
    ElMessage.success('审核完成')
    showReviewDialog.value = false
  } catch (e) {
    ElMessage.error(e?.response?.data?.message || e?.message || '审核失败')
  } finally {
    reviewLoading.value = false
  }
}

// 状态中文与颜色
const statusText = (s) => ({ PENDING: '待审核', APPROVED: '已通过', REJECTED: '已驳回' }[s] || '待审核')
const statusTagType = (s) => ({ PENDING: 'warning', APPROVED: 'success', REJECTED: 'danger' }[s] || 'info')
</script>

<style scoped>
</style> 
